{__NOLAYOUT__}<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台登录</title>
    <!-- Base Style -->
    <link rel="stylesheet" href="__STATIC__/admin/css/style.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="__ADMINLTE__/plugins/fontawesome-free/css/all.min.css">
    <!-- Bootstrap Latest -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@latest/dist/css/bootstrap.min.css">
    <!-- ElementUI 最新版 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body class="hold-transition login-page">
    <el-container class="wrapper min-vh-100" id="login">
        <el-main>
            <el-row class="h-100" type="flex" align="middle">
                <el-col :span="10" :offset="7">
                    <el-row id="login-area" class="shadow">
                        <el-col :span="12" class="h-100 rounded text-center d-flex flex-column align-items-center justify-content-center" :style="{'background-color': 'lightcyan'}">
                            <el-avatar class="logo bg-transparent w-50 h-50" src="__STATIC__/admin/images/logo.png"></el-avatar>
                            <div class="name">TL后台</div>
                        </el-col>
                        <el-col :span="12" class="h-100 rounded" :style="{'background-color': 'white'}">
                            <el-form 
                                ref="loginForm" 
                                v-loading="loading" 
                                :model="form" 
                                label-position="right"
                                :rules="rules" 
                                class="h-100 py-5"
                                status-icon
                            >
                                <el-row type="flex" justify="center">
                                    <el-col :span="21">
                                        <el-form-item prop="username">
                                            <el-input id="username" 
                                                v-model="form.username" 
                                                label="用户名" 
                                                maxlength="20" 
                                                placeholder="用户名"
                                                class="border-bottom"
                                                prefix-icon="el-icon-user-solid"
                                                autofocus
                                                clearable
                                            >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row type="flex" justify="center">
                                    <el-col :span="21">
                                        <el-form-item prop="password">
                                            <el-input 
                                                id="password"
                                                v-model="form.password"
                                                label="密码"
                                                maxlength="100"
                                                minlength="6" 
                                                placeholder="密码"
                                                class="border-bottom"
                                                prefix-icon="el-icon-lock"
                                                show-password
                                                clearable
                                            >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <eq name="captcha" value="1"> 
                                    <el-row type="flex" justify="center">
                                        <el-col :span="12">
                                            <el-form-item prop="captcha">
                                                <el-input id="captcha" 
                                                    v-model="form.captcha" 
                                                    label="验证码" 
                                                    maxlength="5" 
                                                    placeholder="验证码"
                                                    class="border-bottom"
                                                    prefix-icon="fas fa-shield-alt"
                                                    clearable
                                                >
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9">
                                            <tr:captcha 
                                                ref="captcha"
                                                height="42" 
                                                width="150" 
                                                font-size="18" 
                                                id="captcha" 
                                                style="width: 100%; cursor: pointer;"
                                            />
                                        </el-col>
                                    </el-row>
                                </eq>
                                <el-row type="flex" justify="center">
                                    <el-col :span="21">
                                        <el-form-item>
                                            <el-button type="primary" @click="onSubmit" class="w-100">登 录</el-button>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
    </el-container>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="__ADMINLTE__/plugins/jquery/jquery.min.js"><\/script>')</script>
    <!-- Bootstrap Latest -->
    <script src="https://unpkg.com/bootstrap@latest/dist/js/bootstrap.min.js"></script>
    <!-- Vue 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- ElementUI 最新版 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- axios(类似Ajax) -->
    <js href="https://unpkg.com/axios@latest/dist/axios.min.js" />
    <!-- Vue-Axios 最新版 -->
    <script src="https://unpkg.com/vue-axios@latest/dist/vue-axios.min.js"></script>
    <!-- App JS -->
    <script src="__STATIC__/js/app.js"></script>

    <script>
        let vu = new Vue({
            el: '#login',
            data() {
                return {
                    loading: false,
                    form: {
                        username: '',
                        password: '',
                        captcha: ''
                    },
                    rules: {
                        username: [
                            {required: true, message: "用户名不能为空"},
                            {min: 4, max: 20, message: "用户名长度需要4到20个字符"},
                            {pattern: /^\w+$/, message: "用户名只能是字母、数字和下划线_"}
                        ],
                        password: [
                            {required: true, message: "密码不能为空"},
                            {min: 6, message: "密码长度至少6个字符"},
                            {
                                pattern: /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*()><,.?\-_=+/|;:'"]{6,100}$/, 
                                message: "密码必须包含字母和数字"
                            }
                        ],
                        captcha: [
                            {required: true, message: "验证码不能为空"},
                            {len: 5, message: "验证码长度必需5个字符"}
                        ]
                    }
                }
            },
            methods: {
                onSubmit() {
                    this.$refs.loginForm.validate(valid => {
                        this.$message.closeAll();
                        if (valid) {
                            this.loading = true;
                            let vm = this;
                            var formObj = new FormData();
                            formObj.append('username', this.form.username);
                            formObj.append('password', this.form.password);
                            formObj.append('captcha', this.form.captcha);
                            this.axios.post( '{:url("doLogin")}?_ajax=1', formObj )
                            .then(function(response) {
                                let data = response.data;
                                if (1 === data.code)
                                {
                                    vm.$message( elMessageOptions(data.msg, 'success') );
                                    setTimeout(() => {
                                        if (data.url)
                                            window.location.href = data.url;
                                        
                                        // 新建成功返回角色组列表页
                                        history.back(-1);
                                    }, 2000)
                                } else if (0 === data.code) {
                                    vm.$refs.captcha.click()                                 
                                    vm.loading = false;
                                    vm.$message (elMessageOptions(data.msg) );  
                                }
                            })
                            .catch(function(error) {
                                vm.$refs.captcha.click()     
                                vm.loading = false;
                                vm.$message( elMessageOptions( adminEditingError(error) ) );
                            })
                        } else {
                            return false;
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>